import { RectNode, RectNodeModel, h } from '@logicflow/core';
class SquareModel extends RectNodeModel {

 setAttributes() {
  // const size = 80;
  // const circleOnlyAsTarget = {
  //  message: "正方形节点下一个节点只能是圆形节点",
  //  validate: (source, target) => {
  //   return target.type === "circle";
  //  },
  // };

  this.width = 200;
  this.height = 50;
  this.radius = 10;
  this.rx = 10;
  this.ry = 10;
  // this.anchorsOffset = [
  //  [200 / 2, 0],
  //  [-50 / 2, 0]
  // ];
  // this.sourceRules.push(circleOnlyAsTarget);
 }
}
class SquareView extends RectNode {
 getShape() {
  // 通过 getAttributes 获取 model 中的属性
  // console.log(this);

  const { x, y, fill = '#ffffff', radius, width = 200, rx, ry, height = 50, stroke = 'rgb(0, 0, 0)', strokeWidth = 2 } = this.props.model;
  const attrs = {
   // rect 标签的 x，y 对应的是图形的左上角
   // 所以我们要将矩形的中心移动到 x，y
   x: x - (width / 2),
   y: y - (height / 2),
   width,
   height,
   stroke,
   fill,
   strokeWidth,
   radius, rx, ry,
  }
  // getShape 的返回值是一个通过 h 方法创建的 svg 元素
  return h("g", {}, [
   h("rect", { ...attrs }),
   h(
    'svg',
    {
     x: x - (width / 2) + 5,
     y: y - (height / 2) + 5,
     width: 30,
     height: 30,
     viewBox: "0 0 1274 1024",
    },
    h(
     'path',
     {
      fill: stroke,
      d:
       "M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z",
     }
    )
   )
  ]
  );
 }
}
export default {
 type: 'icon-node',
 view: SquareView,
 model: SquareModel,
};
